1. ArrayBuffer

  • 是什么：一段固定长度、连续的二进制内存。

  • 不能直接读写，必须通过视图（TypedArray 或 DataView）访问。

  • 常用场景：

    • 文件读写（图片、音视频）

    • 网络传输（WebSocket、Fetch）

    • WebGL / GPU 数据

    • 加密解密数据

  • 示例：

    const buf = new ArrayBuffer(4);
const u8 = new Uint8Array(buf);
u8[0] = 255;
console.log(u8[0]); // 255

2. SharedArrayBuffer

  • 是什么：可以被多个线程同时访问的二进制内存。

  • 不会复制，跨线程传递时是零拷贝。

  • 需要配合 Atomics 保证数据同步。

  • 浏览器限制：需跨源隔离（COOP/COEP）。

  • 常用场景：

    • 多线程数据共享（主线程 + Worker）

    • 实时游戏（物理计算 + 渲染）

    • 音视频解码与播放共享缓冲

    • 科学计算、机器学习

  • 示例：

    const sab = new SharedArrayBuffer(4);
const u32 = new Uint32Array(sab);
u32[0] = 123;
// 传给 Worker 后，两个线程可同时访问并修改

3. TypedArray

  • 是什么：定型数组视图，用固定类型访问 ArrayBuffer / SharedArrayBuffer。

  • 特点：

    • 高性能批量数值运算

    • 必须按类型大小对齐（如 Int32 按 4 字节）

    • 按系统字节序读写

  • 常用类型：Uint8Array, Int16Array, Float32Array 等

  • 示例：

    const arr = new Uint8Array([1, 2, 3]); // 自动分配底层 ArrayBuffer

4. DataView

  • 是什么：灵活的二进制视图，可按任意偏移读写各种类型，并指定字节序。

  • 特点：

    • 不要求按类型大小对齐

    • 可选大端/小端序

    • 适合自定义二进制格式解析

  • 示例：

    const buf = new ArrayBuffer(4);
const dv = new DataView(buf);
dv.setUint16(0, 65535, true); // 小端序
console.log(dv.getUint16(0, true)); // 65535

5. 对比表

特性

ArrayBuffer

SharedArrayBuffer

TypedArray

DataView

是否共享内存

❌ 否

✅ 是

依赖底层缓冲区

依赖底层缓冲区

跨线程传递

转移（原失效）

保留引用

依赖底层缓冲区

依赖底层缓冲区

类型

无

无

固定类型

任意类型

字节序控制

无

无

按系统字节序

✅ 可指定

是否对齐

N/A

N/A

必须对齐

不需要

常见用途

文件、网络、GPU 数据

多线程并发

数值计算

文件解析

ChatGPT Image 2025年8月12日 22_09_28.png

  • ArrayBuffer（蓝色块）

    • 位于中间，是原始二进制内存块，不能直接读写。

    • 需要通过视图（上方两个白色块）来访问。

  • TypedArray（左上白色块）

    • 一类固定类型、定长的数组视图（如 Uint8Array, Float32Array）。

    • 按系统字节序访问，速度快，适合批量数值计算。

    • 依赖底层的 ArrayBuffer 存储数据。

  • DataView（右上白色块）

    • 更通用的视图，可以按任意偏移读取各种类型，并指定大小端字节序。

    • 灵活度高，适合解析自定义二进制格式。

    • 也依赖底层的 ArrayBuffer。

  • SharedArrayBuffer（下方蓝色块）

    • 与 ArrayBuffer 类似，但可以在多个线程之间共享同一块内存（零拷贝）。

    • 需要配合 Atomics 来保证多线程数据安全。

    • 也能被 TypedArray 或 DataView 作为底层缓冲区使用。

📌 解读：

  • ArrayBuffer / SharedArrayBuffer 是内存本体，负责存放原始数据。

  • TypedArray / DataView 是访问工具，决定如何解释和读写这块内存。

  • SharedArrayBuffer 可以理解为“多线程版 ArrayBuffer”，功能更强，但需要同步控制。

SharedArrayBuffer 使用限制及注意事项

SharedArrayBuffer 是 JavaScript 中用于在多个线程（如 Web Worker）间共享内存的底层对象，允许高效的并发数据访问。但它的使用受到多方面严格限制，主要出于安全和兼容性考虑：

  1. 跨源隔离要求（COOP + COEP）
    为防止安全漏洞（如 Spectre 侧信道攻击），现代浏览器要求页面必须开启跨源隔离才能启用 SharedArrayBuffer。
    具体来说，服务器必须设置以下 HTTP 响应头：

    • Cross-Origin-Opener-Policy: same-origin

    • Cross-Origin-Embedder-Policy: require-corp
      只有满足这两个条件，浏览器才允许页面访问 SharedArrayBuffer，否则会被禁用。

  2. 浏览器兼容性
    并非所有浏览器或版本都支持 SharedArrayBuffer。尤其是旧版浏览器或某些隐私模式下，可能完全禁用该功能。开发时应先检测是否支持。

  3. 固定大小且不可变
    SharedArrayBuffer 一旦创建，内存大小就固定了，无法动态扩展，使用时需要提前规划好内存大小。

  4. 必须通过视图访问
    SharedArrayBuffer 本身是底层原始内存块，不能直接读写，必须通过 TypedArray（如 Uint8Array）或 DataView 来访问。

  5. 多线程同步与安全
    由于 SharedArrayBuffer 允许多个线程共享内存，必须使用 Atomics 对象提供的原子操作来同步访问，避免竞态条件和数据损坏。

  6. 安全风险与性能考虑
    该技术虽高效，但使用不当容易引入竞态错误和安全隐患，建议仅在确有多线程共享内存需求且理解同步机制时使用。